<script setup lang="ts">
const emit = defineEmits(['change'])

const change = (index: any) => {
  console.log(index)
  emit('change', index)
}
</script>

<template>
  <div class="main">
    <el-row :gutter="16">
      <el-col :span="6" :offset="3">
        <el-card class="card" @click="change('2')">
          <div class="card-con">
            <div class="card_image card_image_1"></div>
            <div class="card_text">在线加密</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card" @click="change('3')">
          <div class="card-con">
            <div class="card_image card_image_2"></div>
            <div class="card_text">图片攻击</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="card" @click="change('4')">
          <div class="card-con">
            <div class="card_image card_image_3"></div>
            <div class="card_text">在线解密</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="css" scoped>
.main {
  margin-top: 100px;
}

.card {
  height: 15rem;
  border-radius: 10px;
  background-color: #fff;
}

.card-con {
  height: calc(15rem - 32px);
  width: 100%;
}

.card_image {
  display: block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  text-align: center;
  position: relative;
  height: 80%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card_image_1 {
  background-image: url('../../assets/pdftoppt.svg');
}

.card_image_2 {
  background-image: url('../../assets/jpg.svg');
}

.card_image_3 {
  background-image: url('../../assets/pdf-to-jpg.svg');
}

.card_text {
  height: 20%;
  text-align: center;
  min-height: 1rem;
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  letter-spacing: 1px;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
</style>
